import React, {useState} from "react";
import {Pressable, SafeAreaView} from "react-native";
import {Icon, ListItem, makeStyles, Switch} from "@rn-vui/themed";
import * as types from '../../store/types';
import AsyncStorage from "@react-native-async-storage/async-storage";

const useStyles = makeStyles(({colors}) => ({
    title: {
        fontSize: 20,
        fontWeight: '500'
    }
}))

const Settings = ({navigation}: any) => {
    const styles = useStyles();
    const [playOrderSound, setPlayOrderSound] = useState<boolean>(false);

    const onSoundChange = React.useCallback((value: any) => {
        setPlayOrderSound(value);
        AsyncStorage.setItem(types.PLAY_ORDER_SOUND, value.toString());
    }, []);

    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerTitle: 'Settings',
            headerLeft: () => (
                <Pressable style={{marginLeft: -10}} onPress={() => {
                    navigation.toggleDrawer();
                }}>
                    <Icon
                        name={'notes'}
                        size={40}
                    />
                </Pressable>
            ),
        });

        AsyncStorage.getItem(types.PLAY_ORDER_SOUND).then(value => {
            setPlayOrderSound(value === 'true');
        });
    }, []);
    return (
        <SafeAreaView style={{flex: 1}}>
            <ListItem bottomDivider>
                <ListItem.Content>
                    <ListItem.Title style={styles.title}>来单播放提示音</ListItem.Title>
                </ListItem.Content>
                <Switch value={playOrderSound} onValueChange={onSoundChange}/>
                <ListItem.Chevron/>
            </ListItem>
        </SafeAreaView>
    );
};

export default React.memo(Settings);
